<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		.user-box{background: #FF9502;width: 100%;height: 150px;padding: 30px 15px 0 15px;box-sizing: border-box;color: #ffffff;}
		.user-box .head{width: 60px;height: 60px;border: 1px solid #ffffff;border-radius: 50%;box-sizing: border-box;}
		.user-box .name-box{height: 60px;padding-left: 16px;box-sizing: border-box;font-size: 16px;flex-direction: column;justify-content: center;}
		.user-box .name-box .name{font-weight: bold;}
		.user-box .name-box .code{box-sizing: border-box;align-items: center;line-height: 18px;padding-top: 6px;}
		.user-box .name-box .code .fuzhi{font-size: 10px;padding: 0 4px;margin-left: 10px;height: 16px;line-height: 16px;}
		.user-box .name-box .code .fuzhi::before{border: 1px solid #ffffff;border-radius: 4px;}

		.num-box{margin: -45px 15px 0 15px;background: #ffffff;border-radius: 4px;padding: 20px 0 ;box-sizing: border-box;border-radius: 4px;margin-bottom: 10px;}
		.num-box .l{height: 50px;flex-direction: column;align-items:center;justify-content: space-between;}
		.num-box .l .num{font-size: 24px;color: #FF9502;font-weight:bold;}
		.num-box .l .text{font-size: 14px;color: #333333;}

		.tuijian-box{background: #ffffff;width: 100%;height: 80px;padding: 20px 15px ;box-sizing: border-box;margin-bottom: 10px;}
		.tuijian-box .head{width: 40px;height: 40px;border-radius: 50%;box-sizing: border-box;}
		.tuijian-box .name-box{height: 40px;padding-left: 10px;box-sizing: border-box;font-size: 14px;flex-direction: column;justify-content: center;}
		.tuijian-box .name-box .code{box-sizing: border-box;align-items: center;line-height: 18px;}
		.tuijian-box .name-box .code .fuzhi{font-size: 10px;padding: 0 4px;margin-left: 10px;height: 16px;line-height: 16px;color: #FF9502;}
		.tuijian-box .name-box .code .fuzhi::before{border: 1px solid #FF9502;border-radius: 4px;}
		.tuijian-box .name-box .name{padding-top: 6px;font-size: 14px;color: #666666;}

		/*类型切换*/
		.sel-type{width: 100%;height: 46px;background: #FFFFFF;z-index: 999;}
		.sel-type.fixed-sta{position: fixed;top: 0;}
		.sel-type .type-one{height: 100%;text-align: center;line-height: 46px;font-size: 15px;color: #BDBDBD}
		.sel-type .type-one.on{color: #333333;position: relative;}
		.sel-type .type-one.on:after{display: block;content:"";width: 24px;height: 3px;background: #FF9502;position: absolute;bottom: 0;left: 50%;margin-left: -12px;}
		.fenge{width: 100%;height: 46px;background: #F6F6F6;}

		/*进行中和已成功列表*/
		.info-list{width: 100%;box-sizing: border-box;}
		.info-list .info-box{width: 100%;}
		.info-list .info-box .info-one{width: 100%;background: #FFFFFF;padding: 20px 15px;box-sizing: border-box;align-items: center;}
		.info-list .info-box .info-one .img-box{width: 56px;height: 56px;border-radius:50%;overflow: hidde}
		.info-list .info-box .info-one .img-box img{width: 100%;height: 100%;}
		.info-list .info-box .info-one .center-box{align-items: center;padding-left: 15px;box-sizing: border-box;}
		.info-list .info-box .info-one .center-box .name{font-size: 16px;color: #333333;}
		.info-list .info-box .info-one .center-box .time{font-size: 14px;color: #666666;}
		.info-list .info-box .info-one .sta{font-size: 15px;}
		.info-list .info-box .info-one .sta.c{font-size: 15px;color: #FF9502;}
		.info-list .info-box .info-one .btn{width: 58px;height: 30px;background:#FF9502;text-align:center;line-height: 30px;border-radius:4px;color: #FFFFFF;font-size: 12px;}
		.info-list .info-box .info-one .btn.c{background: #B1B1B1;}
		.info-list .info-box .info-one:last-child::before{display:none;}
		.nodata{margin-top:30px;}
	</style>
	<body>
		<div id="vue" class="warp">

			<!--滑动高度-->
			<div id="height-warp">
				<!--个人信息-->
				<div class="user-box flex">
					<div class="head bgpic" :style="{backgroundImage:'url('+udata.avatar+')'}"></div>
					<div class="name-box flex flex1">
						<div class="name" v-text="udata.nickname"></div>
						<div class="code flex"><span>邀请码:<i v-text="udata.yqcode"></i></span><span :data-yqcode="udata.yqcode" class="fuzhi border-all" onclick="fuzhiOrder(this)">复制</span></div>
					</div>
				</div>

				<!--邀请数量-->
				<div class="num-box flex">
					<div class="l flex flex1 border-right">
						<div class="num" v-text="udata.yesterday">0</div>
						<div class="text">昨日邀请注册数</div>
					</div>
					<div class="l flex flex1">
						<div class="num" v-text="udata.today">0</div>
						<div class="text">今日邀请注册数</div>
					</div>
				</div>

				<!--我的推荐人-->
				<div class="tuijian-box flex" v-if="udata && udata.yquser">
					<div class="head bgpic" :style="{backgroundImage:'url('+udata.yquser.avatar+')'}"></div>
					<div class="name-box flex flex1">
						<div class="code flex"><span v-text="udata.yquser.nickname"></span><span class="fuzhi border-all">推荐人</span></div>
						<div class="name" v-text="udata.yquser.username"></div>
					</div>
				</div>

			</div>

			<!--类型切换-->
			<div class="sel-type flex" id="fixed-cont">
				<div class="type-one flex1 on" tapmode onclick="tab_type(this);" data-sta="0">直接邀请(<i v-text="udata.zjcount"></i>)</div>
				<div class="type-one flex1" tapmode onclick="tab_type(this);" data-sta="2">团队邀请(<i v-text="udata.tdcount"></i>)</div>
			</div>
			<div class="fenge" id="zhanwei" style="display:none;"></div>

			<!--进行中和已成功列表-->
			<div class="info-list">
				<div class="info-box">
					<div class="info-one flex border-top" style="display:none;" :style="{ display:(Pdata ? '':'none')}" v-for="(item,key) in Pdata.listData">
						<div class="img-box bgpic" :style="{backgroundImage:'url('+item.avatar+')'}"></div>
						<div class="center-box flex1">
							<div class="name" v-text="item.nickname"></div>
							<div class="time" >注册时间：<i v-text="item.addtime"></i></div>
						</div>
						<div class="sta" >邀请人：<i v-text="item.yqnum"></i></div>
					</div>
				</div>
			</div>

			<!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
				<img src="../../image/no_page/no_yaoqing1.png" />
				<p>暂无信息</p>
			</div>

			<!-- 底部 -->
			<div class="bottom-box" :style="{ display:(loadingMsg ? '':'none')}">
				<div class="msgbox" v-html="loadingMsg" style="color:#999;"></div>
			</div>

			<div class="zw" style="width:100%;height:80px;"></div>
			<!--底部的立即分享按钮-->
			<div class="warp-btn" id="app-footer" data-type="yaoqing" tapmode onclick="shareShop(this)">
	            <div class="btn">立即分享</div>
	        </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
	define(function (require, exports, module) {

		lanYun.setFooter('app-footer');
		var sta = 0;
		_page.getData = function() {
			lanYun.get('Useryaoqing/myinfo',function (ret){
				if(ret && ret.data){
					lanYun.vue.udata = ret.data;
					//console.log(JSON.stringify(ret.data));
					lanYun.ajaxPageSta = 0; lanYun.page = 1;
					_page.getList(2);
				}
            },2)
		};

		_page.getList = function (loading) {
			lanYun.getVueData({url:'Useryaoqing/index',get:{page:lanYun.page,type:sta},cache:0,loading:loading},function(ret) {
				//console.log(JSON.stringify(ret));
			});
        }

		lanYun.newVue('#vue',{
			udata:{},
		},function() {
			_page.getData();
		});

		//滚动加载..
		new auiScroll({distance:200, listen:true},function(ret) {
			if($(window).scrollTop() < 2) ret.isToBottom = false;
			var d = ret.scrollTop / 208;
			// 滑动的高度
			var h = $('#height-warp').height() + 10;
            if(ret.scrollTop > h){
                $('#fixed-cont').addClass("fixed-sta");
                $('#zhanwei').show();
            }else {
                $('#fixed-cont').removeClass("fixed-sta");
                $('#zhanwei').hide();
            }
			if(!ret.isToBottom) return;
			_page.getList(2);
		});

		//分享商品
		shareShop = function(tis){
			var dst = tis.dataset;
			lanYun.openFrame('dialog/share.html',{type:'yaoqing',ani:0},function(data) {});
		}

		//切换头部类型
		tab_type = function (tis) {
			if($(tis).hasClass('on')) return;
			var dst = tis.dataset;
			var index = $(tis).index();
			$('.sel-type .type-one').removeClass('on');
			$(tis).addClass('on');
			sta = dst.sta;
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getList(2);
		}

		//查看邀请规格
		topMenuClick = function () {
	        lanYun.openWin('main3/fuwenben.html', {
	            win:'win',
	           	title:"分享邀请规则",
	            frameParam : {type:"Page/yaoqing"}
	       });
		}

		//刷新页面
		reshPage = function (){
			lanYun.ajaxPageSta = 0; lanYun.page = 1;
			_page.getData(0);
		}

		//复制到剪切板
		fuzhiOrder = function (tis) {
			var dst = tis.dataset;
			var clipBoard = api.require('clipBoard');
			clipBoard.set({
				value: dst.yqcode
			}, function(ret, err) {
				if (ret) {
					lanYun.toast('复制成功')
				} else {
					lanYun.toast('复制失败')
				}
			});
		}


	});
</script>
